<template>
    <div class="search-result">
        <!-- 搜索结果 tab-->
        <van-tabs
            type="line"
            class="result-tabs"
            color="#ff9800"
            v-model="currentCate"
            line-height="5px"
            line-width="50px"
            title-active-color="#ff9800"
            :animated="true"
            swipeable
        >
            <van-tab v-for="item in categories" :key="item" :title="item">
                <!-- 列表组件 -->
                <van-list>
                    <div
                        class="result-item"
                        v-for="item in resultList"
                        :key="item.videoId"
                    >
                        <van-image
                            :src="item.imgURL"
                            @click="$router.push(`/episode/${item.videoId}`)"
                        />
                        <div class="result-inner">
                            <div
                                class="item-info"
                                @click="
                                    $router.push(`/episode/${item.videoId}`)
                                "
                            >
                                <p class="name">{{ item.title || item }}</p>
                                <p class="cate">
                                    节目类型 | 分类 |
                                    {{ item.year ? item.year : "2077" }}
                                </p>
                                <p class="star">
                                    <span
                                        v-for="item in item.stars"
                                        :key="item.videoId"
                                    >
                                        {{ item }}
                                    </span>
                                </p>
                            </div>
                            <div class="option">
                                <van-button
                                    class="btn-play"
                                    type="primary"
                                    color="#FF9800"
                                >
                                    <template v-slot:icon>
                                        <van-icon name="play-circle" />
                                    </template>
                                    播放
                                </van-button>
                                <van-button
                                    class="btn-air"
                                    type="primary"
                                    color="#FF9800"
                                >
                                    <template v-slot:icon>
                                        <van-icon name="live" />
                                    </template>
                                    投屏
                                </van-button>
                            </div>
                        </div>
                    </div>
                </van-list>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
export default {
    data() {
        return {
            categories: ['综合', '电影', '电视剧', '综艺', '纪录片'],
            currentCate: 0,
            resultList: []
        };
    },
    props: {
        searchText: {
            type: String,
            required: true
        },
        recommendList: {
            type: Array,
            required: true
        }
    },
    created() {
        this.resultList = this.recommendList.filter(item =>
            item.title.includes(this.searchText)
        );
    }
};
</script>

<style lang="scss" scoped>
.search-result {
    text-align: left;
    background-color: #fff;
    /deep/ .van-tabs__wrap {
        box-sizing: border-box;
        border-bottom: 1px solid #bbb;
        height: 80px;
        .van-tabs__nav {
            margin: 0;
            padding: 0 40px;
            border: 0;
            height: 80px;
            .van-tabs__line {
                position: absolute;
                bottom: 0;
                border-radius: 0px;
            }
        }
        .van-tab {
            font-size: 28px;
            border: 0;
            span {
                height: 80px;
                line-height: 80px;
            }
        }
    }
    /deep/ .van-tabs__content {
        div.result-item {
            display: flex;
            justify-content: space-between;
            height: 352px;
            padding: 16px 40px;
            color: #000;
            font-size: 28px;
            line-height: 80px;
            .van-image {
                width: 250px;
                height: 100%;
            }
            .result-inner {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                width: 390px;
                overflow: hidden;
                .item-info {
                    height: 240px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    p {
                        margin: 0;
                        padding: 0;
                        font: 24px/1.8 "MicroSoft Yahei";
                        word-wrap: break-word;
                    }
                    p.name {
                        font: 36px/2.2 "MicroSoft Yahei";
                    }
                }
                .option {
                    padding-bottom: 16px;
                    height: 80px;
                    .van-button {
                        margin-right: 20px;
                        width: 160px;
                        height: 64px;
                        .van-icon {
                            transform: translateY(4px);
                            font-size: 28px;
                        }
                        .van-button__text {
                            font-size: 28px;
                        }
                    }
                }
            }
        }
    }
}
</style>
